<template>
  <div class="scenicTolietWrapper">
    <v-header :title="title">
    </v-header>
    <div id="container" :style="{height: heightTemp + 'px', width: widthTemp + 'px'}"></div>
    <div class="guideWrapper" style="display: flex; justify-content: space-between;">
      <div></div>
      <div><i class="icon iconfont icon-daohang"/></div>
    </div>
    <actionsheet v-model="showMap" :menus="menusMap" :show-cancel="showCancel" @on-click-menu="clickMapMenu"></actionsheet>
    <div class="alertWrapper">
            <div>
              <confirm v-model="showGaoDei"
              title="操作提示"
              @on-cancel="onCancelGaoDei"
              @on-confirm="onConfirmGaoDei">
                  <p style="text-align:center;">您尚未安装常用地图，小嗨为您推荐安装高德地图</p>
              </confirm>
            </div>
        </div>
  </div>
</template>
<script>
import VHeader from '@/components/v-header/v-header'
import AMap from 'AMap'
import AMapUI from 'AMapUI'
import { isIphoneX, isAndroid, isIOS } from '@/assets/js/brower'
import { Actionsheet, Confirm } from 'vux'
import axios from '@/api/axiosApi'
var map

export default {
  data () {
    return {
      title: '旅游厕所',
      heightTemp: 500,
      widthTemp: 1000,
      tolietList: [],
      // 跳转地图
      showMap: false,
      menusMap: {},
      showGaoDei: false,
      showCancel: true,
      latitude: '',
      longitude: '',
      address: ''
    }
  },
  directives: {
  },
  components: {
    VHeader,
    AMap,
    AMapUI,
    Actionsheet,
    Confirm
  },
  computed: {
  },
  mounted() {
    if (isIphoneX()) {
      this.heightTemp = window.innerHeight - 73
    } else {
      this.heightTemp = window.innerHeight - 63
    }
    this.widthTemp = window.innerWidth
    this.init()
  },
  created() {
  },
  methods: {
    // 获取厕所数据
    getToliteList () {
      axios.get(this, '/v1/toiletInfo/getToiletInfo?pageNum=1&pageSize=50', null, (data) => {
        this.tolietList = data
        let _self = this
        // 地图初始化
        map = new AMap.Map('container', {
          resizeEnable: true,
          zoom: 10
        })
        AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
          map.addControl(new AMap.ToolBar())
          map.addControl(new AMap.Scale())
        })
        // 覆盖默认的dom结构
        AMapUI.loadUI(['overlay/SimpleInfoWindow'], function(SimpleInfoWindow) {
          var marker
          // 循环进行图标标注marker
          _self.tolietList.forEach(element => {
            marker = new AMap.Marker({
              map: map,
              zIndex: 9999999,
              position: [element.longitude, element.latitude]
            })
            // 自定义弹出信息窗体样式和数据绑定
            var infoWindow = new SimpleInfoWindow({
              infoTitle: '<strong style="font-size: 15px">' + element.name + '</strong>',
              infoBody: ['<div class="guideWrapper" style="display: flex; justify-content: space-between;">',
                '<div style="font-size: 14px">' + element.address + '</div>&nbsp;',
                '<div><i class="icon iconfont icon-daohang"/></div>',
                '</div>'].join(''),
              // 基点指向marker的头部位置（信息窗体的具体位置）
              offset: new AMap.Pixel(0, -31)
            })
            // maker标注点击事件后弹信息窗体
            marker.on('click', openInfoWin)
            // 点击弹出信息窗体上面的导航图标事件
            infoWindow.get$Container().on('click', '.icon-daohang', function(event) {
              event.stopPropagation()
              _self.toNativeMap(element.latitude, element.longitude, element.address)
            })
            function openInfoWin(e) {
              infoWindow.open(map, e.target.getPosition())
            }
          })
        })
      })
    },
    init () {
      const _self = this
      _self.getToliteList()
    },
    // 跳转导航
    toNativeMap (latitude, longitude, address) {
      if (isIOS()) {
        window.webkit.messageHandlers.NativeMethod.postMessage({'methodName': 'openMapNavi', 'latitude': latitude, 'longitude': longitude})
      } else {
        // android
        this.menusMap = JSON.parse(window.android.isInstallByread())
        if (this.menusMap == null || Object.getOwnPropertyNames(this.menusMap).length === 1) {
          this.showCancel = false
          this.showGaoDei = true
          return
        }
        if (this.menusMap.baiDu === '2') {
          this.menusMap.baiDu = '百度地图'
        }
        if (this.menusMap.gaoDei === '1') {
          this.menusMap.gaoDei = '高德地图'
        }
        if (this.menusMap.tenXun === '3') {
          this.menusMap.tenXun = '腾讯地图'
        }
        this.latitude = latitude
        this.longitude = longitude
        this.address = address
        this.showMap = true
      }
    },
    clickMapMenu (value) {
      if (isAndroid()) {
        if (value === 'baiDu') {
          window.android.makeUpMap(this.latitude, this.longitude, this.address, 2, 1, '')
        } else if (value === 'gaoDei') {
          window.android.makeUpMap(this.latitude, this.longitude, this.address, 1, 1, '')
        } else if (value === 'tenXun') {
          window.android.makeUpMap(this.latitude, this.longitude, this.address, 3, 1, '')
        }
      }
    },
    // 确认弹框友好提示
    onCancelGaoDei () {
    },
    onConfirmGaoDei () {
      window.android.makeUpMap(this.latitude, this.longitude, this.address, 0, 1, '')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
@import '~@/assets/css/mixins.styl'
.scenicTolietWrapper {
    #container {
        width: 500px;
        height: 800px;
    }
    .guideWrapper {
      display flex
      justify-content space-between
    }
}
</style>
